<template>
    <main class="recommended-supplier">
      <homepage-nav :active-index="1"></homepage-nav>
      <section class="categories">
        <div v-for="(item,index) in categories" :key="index"
             class="category" :class="{active:index===activeIndex}">
          <span class="category-name">{{item.name}}</span>
        </div>
      </section>
     <sectoin class="search-form">
         <label v-for="(item,index) in 8" :key="index" class="form-item">
           <div class="form-label">地区</div>
           <input class="form-value"/>
         </label>
     </sectoin>
      <section class="main-table">
        <div class="table-header">
          <div v-for="(item,index) in 9" :key="index" class="table-column">
            油茶基地
          </div>
        </div>
        <div v-for="(item,index) in 10" :key="index" class="table-row" :class="{active:index===2} ">

        </div>
      </section>
    </main>
</template>

<script>
import HomepageNav from './homepage/HomepageNav';

export default {
    components: {
        HomepageNav
    },
    data() {
        return {
            activeIndex: 0,
            categories: [
                {
                    name: '全部'
                },
                {
                    name: '干籽'
                },
                {
                    name: '青果'
                },
                {
                    name: '小粒籽'
                },
                {
                    name: '大粒籽'
                },
                {
                    name: '寒露籽'
                },
                {
                    name: '霜降籽'
                }
            ],
            rows: [
                {
                    price: 18,
                    count: 1000
                },
                {
                    price: 18,
                    count: 1000
                },
                {
                    price: 18,
                    count: 1000
                },
                {
                    price: 18,
                    count: 1000
                }
            ]
        };
    },
    methods: {}
};
</script>
<style lang="scss">
  @import "../../assets/front/front";

  .recommended-supplier {
    width: $page-width;
    .categories {
      height:40px;
      @include flex-align-center;
      border-top: 2px solid $bg-color;
      .category {
        height:40px;
        line-height: 40px;
        font-size: 16px;
        color: $font-dark-color;
        cursor: pointer;
        &.active {
          color: $main-color;
          border-bottom: 2px solid $main-color;
        }
        .category-name {
          border-right: $border;
          padding:0 12px;
        }
      }
    }
    .search-form {
      height:86px;
      margin-top:10px;
      padding:0 50px;
      background: $bg-color;
      display: flex;
      flex-wrap: wrap;
      .form-item {
        margin:5px 10px;
        @include flex-align-center;
        .form-label{
          margin-right:5px;
          font-size:12px;
          color: #323232;
        }
      }
    }
    .main-table {
      margin-top:10px;
      .table-header {
        height:32px;
        @include flex-align-center;
        justify-content: space-around;
        background: $bg-color;
        font-size: 16px;
        color: $font-gray-color;
        border: $border;
      }
      .table-row {
        height:50px;
        border-bottom: $border;
        &.active {
          background: $main-color;
          opacity: 0.5;
        }
      }
    }
  }
</style>
